import {useState, useEffect, ChangeEvent} from 'react';
import {useParams, useNavigate} from 'react-router-dom';
import TutorialData from '../types/Tutorial';
import TutorialService from '../services/TutorialService';

const Tutorial = () =>{
    const initTutorial = {
        id:0,
        title:"",
        description:""
    }

    const {id} = useParams();
    let navigate = useNavigate();

    const [currentTutorial, setCurrentTutorial] = useState<TutorialData>(initTutorial);
    const [message, setMessage] = useState<string>("");

    useEffect(()=> {
        if(id){
            getTutorial(parseInt(id));
        } 
    },[id])

    const getTutorial = async(id:number)=>{
        const response = await TutorialService.getTutorial(id);
        setCurrentTutorial(response.data);
        console.log(response.data);
    }

    const updateTutorial = async()=> {
        const response = await TutorialService.update(currentTutorial, currentTutorial.id);
        setMessage("The tutorial was updated successfully.");
        console.log(response.data);
    }

    const handleInputChange = (e: ChangeEvent<HTMLInputElement>)=>{
        const {name, value}= e.target;
        setCurrentTutorial({...currentTutorial, [name]:value});
    }

    const deleteTutorial = async ()=> {
        const response = await TutorialService.remove(id);
        navigate("/tutorials");
    }

    return (
        <div>
            {
                currentTutorial ? (
                    <div className="edit-form">
                        <h4>Tutorial</h4>
                        <div className="form-group">
                            <label htmlFor="title">Title:</label>
                            <input id="title" 
                                   name="title" 
                                   className="form-control"
                                   type="text"
                                   value={currentTutorial.title}
                                   onChange={handleInputChange}
                                   />
                        </div>
                        <div className="form-group">
                            <label htmlFor="description">Description:</label>
                            <input id="description"
                                   name="description"
                                   className="form-control"
                                   type="text"
                                   value={currentTutorial.description}
                                   onChange={handleInputChange}
                                />
                        </div>
                        <div className="form-group">
                            <label>Status:</label>
                            Published
                        </div>
                        <button className="badge badge-danger mr-2" onClick={deleteTutorial}>
                            删除
                        </button>
                        <button className="badge badge-success" onClick={updateTutorial}>
                            修改
                        </button>
                        <p>{message}</p>
                    </div>
                ):(
                    <div>
                        <br/>
                        <p>Please select a tutorial...</p>
                    </div>
                )
            }
        </div>
    )
}

export default Tutorial;